<script setup lang="ts">
import { nextTick, onMounted, reactive, ref, toRefs } from 'vue';

import { ElAutoResizer, ElDialog, ElRow, ElTableV2 } from 'element-plus';

import { vectorServiceApi } from '#/api';
import { useSceneStore } from '#/store';

// import 'element-plus/theme-chalk/el-loading.css';

const props = defineProps({
  currentSelectedLayer: {
    default: () => {},
    type: Object,
  },
  isDialogShow: {
    default: false,
    type: Boolean,
  },
});

const emits = defineEmits(['closeAttrTableDialog', 'deleteGeoData']);

const sceneStore = useSceneStore();

const { isDialogShow, currentSelectedLayer } = toRefs(props);
const isTableloading = ref(true);
const currentDataSource = ref();
const features = reactive({
  data: [] as any,
});
const title = ref([] as any);
const rowheight = ref(40);

const closeAttrTableDialog = () => {
  emits('closeAttrTableDialog');
};

const getSource = () => {
  sceneStore.currentSceneConfig.sources.forEach((item: any) => {
    if (item.sourceId === currentSelectedLayer.value.source) {
      currentDataSource.value = item;
    }
  });
};
onMounted(() => {
  getSource();
  nextTick(async () => {
    // getDetails()
    features.data = await (currentDataSource.value.sourceType === 'geojson'
      ? vectorServiceApi.getAtrrsFromGeojson(currentDataSource.value.sourceId)
      : vectorServiceApi.getAtrr(currentDataSource.value.ptName));
    for (const keyV in features.data[0]) {
      title.value.push({
        key: keyV,
        dataKey: keyV,
        title: keyV,
        width: 120,
      });
    }
    isTableloading.value = false;
  });
});
</script>

<template>
  <div>
    <ElDialog
      v-model="isDialogShow"
      align-center
      @close="closeAttrTableDialog"
      destroy-on-close
      :show-close="true"
      draggable
      :close-on-click-modal="false"
      style="padding-bottom: 15px"
    >
      <template #header="{ titleId, titleClass }">
        <div class="my-header">
          <h4 :id="titleId" :class="titleClass" style="font-size: 18px">
            {{ currentSelectedLayer.name }}
          </h4>
        </div>
      </template>
      <div
        style="
          display: flex;
          align-content: center;
          margin-top: 5px;
          text-align: center;
          border-top: 1px solid #e0e0e0;
        "
      ></div>
      <ElRow class="all">
        <div
          class="tableCon"
          v-loading="isTableloading"
          element-loading-text="正在加载属性表..."
        >
          <ElAutoResizer>
            <template #default="{ height, width }">
              <ElTableV2
                :row-height="rowheight"
                :columns="title"
                :data="features.data"
                :width="width"
                :height="height"
                fixed
              />
            </template>
          </ElAutoResizer>
        </div>
      </ElRow>
    </ElDialog>
  </div>
</template>

<style scoped>
#box {
  width: 70vw;
  height: 100vh;
}

.all {
  position: relative;
  box-sizing: border-box;
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
  width: auto;
  height: auto;
  border: 1 px solid;

  /* padding-top: 5px; */
}

.cell-item {
  display: inline-block;
  width: 70px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

:deep(.el-dialog) {
  width: 40vw;
  height: auto;
  border-radius: 20px;
}

.rightCon {
  /* width: 98%;
  height: 415px; */

  /* background-color: aqua; */
}

.el-tab-paneCon {
  width: 100%;
  height: 100%;
}

.my-header {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  height: 20px;
  padding-left: 10px;
  font-size: 30px;
}

:deep(.el-dialog__body) {
  padding-top: 0;
  padding-bottom: 0;
}

.titleClass {
  font-size: 30px;
}

:deep(.el-descriptions) {
  width: 100%;
}

.el-divider--vertical {
  height: 100%;
  margin-left: 10px;
}

.tableCon {
  width: 100%;

  /* height: 400px; */
  height: 43vh;
}
</style>
